<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->

		<title>Tri by AwfulMedia.com</title>
		<meta name="description" content="" />
		<meta name="author" content="Austin" />

		<!--Grab the Stylesheets-->
		<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet' type='text/css'>
		<link href="css/style.css" rel="stylesheet" type="text/css">
		<link href="css/flexslider.css" rel="stylesheet" type="text/css">
		

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>

	<body>
		<div class="container">
			<header class="sixteen columns alpha omega">
				<a href="index.html"><img class="brand" src="img/logo.png" alt="Tri"></a>
				<nav class="main-nav sixteen columns">
					<ul class="ten columns alpha">
						<li><a href="index.html">Home</a></li>
						<li><a href="portfolio.html">Work</a></li>
						<li><a href="contact.html">Hire me</a></li>
						<li><a href="blog.html">Blog</a></li>
						
					</ul>
					<div class="social six columns omega">
						<a href="#"></a>
						<a href="#"></a>
					</div> <!--Close Social Div-->
				</nav>
			</header>
	      	<section class="sixteen columns feature">
		        <div class="flexslider">
		          <ul class="slides">
		            	<li>
		  	    	    <img src="img/feature-1.png" alt="Featured">
		  	    		</li>
		  	    		<li>
		  	    	    <img src="img/feature-1.png" alt="Featured">
		  	    		</li>
		          </ul>
		        </div><!--Close Flexslider Div-->
	     	</section>
	     	<div class="sixteen columns">
		      	<div class="h-border">
					<div class="heading">
						<h1>Latest Work</h1>
					</div><!--Close "Heading" Div-->
				</div><!--Close H-border Div-->
			</div>
			<section class="latest-work row">
				<div class="one-third column thumbnail">
					<a href="#">
						<img src="img/thumb-1.jpg" alt="Thumb">
						<div class="details">
							<h2>Tri by AwfulMedia</h2>
							<p>Here's some description of the Tri template by AwfulMedia</p>
						</div><!--Close Details Div-->
					</a>
				</div><!--Close Thumbnail Div-->
				<div class="one-third column thumbnail">
					<a href="#">
						<img src="img/thumb-1.jpg" alt="Thumb">
						<div class="details">
							<h2>Tri by AwfulMedia</h2>
							<p>Here's some description of the Tri template by AwfulMedia</p>
						</div><!--Close Details Div-->
					</a>
				</div><!--Close Thumbnail Div-->
				<div class="one-third column thumbnail">
					<a href="#">
						<img src="img/thumb-1.jpg" alt="Thumb">
						<div class="details">
							<h2>Tri by AwfulMedia</h2>
							<p>Here's some description of the Tri template by AwfulMedia</p>
						</div><!--Close Details Div-->
					</a>
				</div><!--Close Thumbnail Div-->
			</section>
			<div class="sixteen columns row">
		      	<div class="h-border">
					<div class="heading">
						<h2>Who Are We?</h2>
					</div><!--Close "Heading" Div-->
				</div><!--Close H-border Div-->
				<div class="focused-text">
					Well, we are a fake website design company based on the Planet Mars. 
					That's right, get your website designed by a martian! Again, we're not real.
				</div><!--Close Focused-text Div-->
			</div>
			<div class="row">
				<div class="eight columns center">
					<div class="h-border">
						<div class="heading">
							<h2>Web Designers</h2>
						</div><!--Close "Heading" Div-->
					</div><!--Close H-border Div-->
					<img src="img/icon-1.png" alt="Icon 1">
					<p class="focused-text">A fake website design company with fake website designers. What did you expect?</p>
				</div>
				<div class="eight columns center">
					<div class="h-border">
						<div class="heading">
							<h2>Software Engineers</h2>
						</div><!--Close "Heading" Div-->
					</div><!--Close H-border Div-->
					<img src="img/icon-2.png" alt="Icon 2">
					<p class="focused-text">Oh yeah, we also fakely develop fake software. We're a darn good company.</p>
				</div>
			</div>
			<footer class="row">
				<div class="eight columns omega">
					<p>&copy;2012 Tri Media, Inc.</p>
				</div>
					<nav class="eight columns alpha">
						<ul>
							<li><a href="index.html">Home</a></li>
							<li><a href="portfolio.html">Work</a></li>
							<li><a href="contact.html">Hire me</a></li>
							<li><a href="blog.html">Blog</a></li>
						</ul>
					</nav>
			</footer>
		</div><!--Close Container Div-->
		
		<!--Grab JS Files-->
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/jquery.flexslider.js" ></script>
		<script type="text/javascript">
			// Can also be used with $(document).ready()
			$(window).load(function() {
			  $('.flexslider').flexslider({
			    animation: "slide"
			  });
			});
		</script>
	</body>
</html>
